<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .2);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

            display: none;
        }

        .content {
            width: 600px;
            height: 250px;
            background-color: azure;
            margin: 100px auto;
            padding: 40px;
        }

        #close {
            margin-left: 550px;
        }

        /* 进度条 */
        .progress {
            /* width: 500px; */
            width: 0px;
            height: 80px;
            background-image: repeating-linear-gradient(135deg, green 0 10px, white 10px 20px);
            margin: 30px;
        }
    </style>
</head>

<body>
    <h1>进度条</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita officiis nostrum qui sunt eaque recusandae
        ipsa, voluptatibus voluptas voluptatem, culpa tempora animi incidunt minima nobis ut deserunt illum, commodi
        dolore!</p>
    <button id="load">加载</button>
    <section>
        <div class="content">
            <button id="close">close</button>
            <div class="progress"></div>
            <span>0%</span>
        </div>
    </section>


    <script>

        //获取元素
        let load = document.getElementById('load');
        let close = document.getElementById('close');
        let section = document.getElementsByTagName('section')[0];
        let span = document.getElementsByTagName('span')[0];//加载百分比
        let progress = document.getElementsByClassName('progress')[0];//进度条本条

        let timer;
        load.onclick = function () {
            //点击后让整个section出现
            section.style.display = 'block';
            let width = 0;//进度条百分比
            timer = setInterval(function () {
                width++;
                if (width == 100) {
                    clearInterval(timer)
                }
                span.innerText = width + '%'
                //每隔100ms进度条宽度+5 进度100，宽度500
                progress.style.width = `${width * 5}px`;
            }, 100)

        }

        close.onclick = function () {
            //点击后让整个section隐藏
            section.style.display = 'none';
            //关掉进度条后所有清零
            width = 0;
            clearInterval(timer)
            progress.style.width = `0px`;
        }



    </script>

</body>

</html>